<template>
  <view class="profile-container">
    <!-- 头部用户信息卡片 -->
    <view class="profile-header">
      <view class="avatar-section">
        <view class="avatar-wrapper">
          <image 
            v-if="user.avatar" 
            :src="user.avatar" 
            class="avatar" 
            mode="aspectFill"
          />
          <view v-else class="avatar-placeholder">
            <uni-icons type="person-filled" size="40" color="#fff"></uni-icons>
          </view>
        </view>
        <view class="user-basic-info">
          <text class="username">{{ user.nickName || user.userName || '用户' }}</text>
          <text class="user-role">{{ roleGroup || '普通用户' }}</text>
        </view>
      </view>
    </view>

    <!-- 详细信息卡片 -->
    <view class="profile-details">
      <view class="detail-card">
        <view class="card-title">
          <uni-icons type="info" size="18" color="#007aff"></uni-icons>
          <text class="title-text">基本信息</text>
        </view>
        
        <view class="detail-list">
          <view class="detail-item">
            <view class="item-left">
              <uni-icons type="person-filled" size="16" color="#666"></uni-icons>
              <text class="item-label">用户名</text>
            </view>
            <text class="item-value">{{ user.userName || '-' }}</text>
          </view>
          
          <view class="detail-item">
            <view class="item-left">
              <uni-icons type="phone-filled" size="16" color="#666"></uni-icons>
              <text class="item-label">手机号码</text>
            </view>
            <text class="item-value">{{ user.phonenumber || '-' }}</text>
          </view>
          
          <view class="detail-item">
            <view class="item-left">
              <uni-icons type="email-filled" size="16" color="#666"></uni-icons>
              <text class="item-label">邮箱地址</text>
            </view>
            <text class="item-value">{{ user.email || '-' }}</text>
          </view>
        </view>
      </view>

      <view class="detail-card">
        <view class="card-title">
          <uni-icons type="staff-filled" size="18" color="#007aff"></uni-icons>
          <text class="title-text">工作信息</text>
        </view>
        
        <view class="detail-list">
          <view class="detail-item">
            <view class="item-left">
              <uni-icons type="auth-filled" size="16" color="#666"></uni-icons>
              <text class="item-label">岗位</text>
            </view>
            <text class="item-value">{{ postGroup || '-' }}</text>
          </view>
          
          <view class="detail-item">
            <view class="item-left">
              <uni-icons type="staff-filled" size="16" color="#666"></uni-icons>
              <text class="item-label">角色</text>
            </view>
            <text class="item-value">{{ roleGroup || '-' }}</text>
          </view>
          
          <view class="detail-item">
            <view class="item-left">
              <uni-icons type="calendar-filled" size="16" color="#666"></uni-icons>
              <text class="item-label">创建日期</text>
            </view>
            <text class="item-value">{{ formatDate(user.createTime) }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 操作按钮 -->
    <view class="action-section">
      <button class="edit-btn" @click="handleEdit">
        <uni-icons type="compose" size="16" color="#fff"></uni-icons>
        <text>编辑资料</text>
      </button>
    </view>
  </view>
</template>

<script setup>
import { getUserProfile } from "@/api/system/user"
import { ref, reactive, getCurrentInstance } from "vue"

const { proxy } = getCurrentInstance()
const user = ref({})
const roleGroup = ref("")
const postGroup = ref("")

function getUser() {
  getUserProfile().then(response => {
    user.value = response.data
    roleGroup.value = response.roleGroup
    postGroup.value = response.postGroup
  })
}

function formatDate(dateStr) {
  if (!dateStr) return '-'
  const date = new Date(dateStr)
  return date.toLocaleDateString('zh-CN')
}

function handleEdit() {
  proxy.$tab.navigateTo('/pages/mine/info/edit')
}

getUser()
</script>

<style lang="scss" scoped>
@import '@/styles/common.scss';

.profile-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding-bottom: 40px;
}

.profile-header {
  padding: 60px 20px 40px;
  
  .avatar-section {
    display: flex;
    align-items: center;
    gap: 20px;
    
    .avatar-wrapper {
      .avatar {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        border: 4px solid rgba(255, 255, 255, 0.3);
      }
      
      .avatar-placeholder {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
        border: 4px solid rgba(255, 255, 255, 0.3);
      }
    }
    
    .user-basic-info {
      flex: 1;
      
      .username {
        display: block;
        font-size: 24px;
        font-weight: bold;
        color: #fff;
        margin-bottom: 8px;
      }
      
      .user-role {
        display: block;
        font-size: 14px;
        color: rgba(255, 255, 255, 0.8);
        background: rgba(255, 255, 255, 0.2);
        padding: 4px 12px;
        border-radius: 12px;
        width: fit-content;
      }
    }
  }
}

.profile-details {
  padding: 0 20px;
  
  .detail-card {
    background: #fff;
    border-radius: 16px;
    margin-bottom: 20px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    
    .card-title {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 20px 20px 0;
      margin-bottom: 16px;
      
      .title-text {
        font-size: 16px;
        font-weight: 600;
        color: $gray-800;
      }
    }
    
    .detail-list {
      .detail-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 20px;
        border-bottom: 1px solid #f5f5f5;
        
        &:last-child {
          border-bottom: none;
        }
        
        .item-left {
          display: flex;
          align-items: center;
          gap: 12px;
          
          .item-label {
            font-size: 15px;
            color: $gray-700;
          }
        }
        
        .item-value {
          font-size: 15px;
          color: $gray-800;
          font-weight: 500;
          max-width: 60%;
          text-align: right;
        }
      }
    }
  }
}

.action-section {
  padding: 0 20px;
  margin-top: 30px;
  
  .edit-btn {
    width: 100%;
    height: 50px;
    background: linear-gradient(135deg, #007aff 0%, #0056cc 100%);
    border: none;
    border-radius: 25px;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 15px rgba(0, 122, 255, 0.3);
    
    &:active {
      transform: translateY(1px);
    }
  }
}
</style>
